<template>
	<!-- 订单列表 -->
	<view class="header">
		<!-- 顶部状态栏站位 -->
		<view :style="{height: systemBarHeight +10 + 'px'}"></view>
		<hx-navbar ref="hxnb" :config="config" />
		<mescroll-body ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="{auto: false, bgColor: '#FFFFFF'}" :up="upOption">
			<view class="order" v-for="(item,index) in projectData" :key="index">
				<view class="flex" style="justify-content: space-between;">
					<text class="tit">{{item.name}}</text>
					<view @click="orderDetail(item)" class="flex align-center">
						<view v-if="item.status==0" style="color: #096;">待支付</view>
						<view v-if="item.status== -1" style="color: crimson;">已取消</view>
						<image style="width: 64rpx;height: 64rpx;margin-left: 5rpx;" src="../../static/topic/7814.png"
							mode=""></image>
					</view>
				</view>
				<view class="flex" style="align-items: center;">
					<image style="width: 48rpx;height: 48rpx;" src="../../static/shield-star.png" mode=""></image>
					<text
						style="font-size: 24rpx;font-weight: 400;color: rgba(30,30,30,0.3);">共厂家具已为此订单购买保险，最高赔付600万</text>
				</view>
				<view style="margin: 20rpx 0;">
					<uni-steps v-if="item.status == 1 || item.status == 2 || item.status == 3" active-color="#6DD230"
						:options="[{title: '设计阶段'}, {title: '生产阶段'}, {title: '安装阶段'}]" :active="item.status -1">
					</uni-steps>
				</view>
				<view class="flex" style="justify-content: space-between;margin: 24rpx 0 0 0;">
					<text class="title">订单号</text>
					<view style="font-size: 28rpx;">
						<text>{{item.orderNum}}</text>
						<text style="color: #167EC1;margin-left: 20rpx;" @click="paste(item.orderNum)">复制</text>
					</view>
				</view>
				<view class="flex" style="justify-content: space-between;">
					<view style="padding-top: 30rpx;">
						<view class="title" style="margin: 24rpx 0;">
							创建日期
						</view>
						<view class="title" style="margin:44rpx 0 24rpx 0;">
							支付方式
						</view>
					</view>
					<view style="position: relative;padding-top: 60rpx;">
						<view class="title">
							2023-02-28 08:32:21
						</view>
						<view class="title" style="margin:44rpx 0 24rpx 0 ;text-align: right;">
							{{pay[item.payType]}}
						</view>
					</view>
					<image v-if="item.status>3" class="over" src="../../static/over.png" mode=""></image>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; //引入滚动
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				config: {
					title: '订单列表',
					color: '#111111',
					backgroundColor: [1, '#FFFFFF'],
					border: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				upOption: {
					auto: false,
					empty: {
						tip: '~ 无更多数据 ~'
					},
					textNoMore: '--没有更多了--',
					noMoreSize: 3,
				},
				pay: {
					1: '微信支付',
					2: '支付宝支付'
				},
				// 系统状态栏的高度
				systemBarHeight: 0,
				id: '',
				projectData: [],
				type: ''
			}
		},
		created() {

		},
		onLoad(e) {
			this.id = e.data
			this.type = this.$cache.get('type')
			this.project(1, 10)
		},
		methods: {
			paste(value) {
				uni.setClipboardData({
					data: value
				});
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			upCallback(e) {
				this.project(e.num, 10)
			},
			project(num, size) {
				let data = {
					pageNo: num,
					pageSize: size
				}
				this.$api.projectList(data).then((res) => {
					res.data.result.list.forEach((item) => {
						item.createTime = this.$tools.fileTime(item.createTime)
						item.depositTime = this.$tools.fileTime(item.depositTime)
					})
					console.log(res, '大萨达')
					if (num == 1) {
						this.projectData = res.data.result.list
					} else {
						this.projectData = this.projectData.concat(res.data.result.list)
					}
					this.mescroll.endBySize(res.data.result.list.length, res.data.total);
				})
			},
			// 获取系统栏高度
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},

			// 订单详情
			orderDetail(e) {
				if (this.type == 4) {
					this.$tools.goPageNoAuth('/clientEnd/page/ordersList/orderDetail?data=' + JSON.stringify(e))
				} else if (this.type == 3) {
					// 安装师傅订单详情
					this.$tools.goPageNoAuth('/clientEnd/page/ordersList/installation')
				}
			}
			//返回上一页
			// goBack() {
			// 	uni.navigateBack(1)
			// },
		}
	}
</script>

<style scoped>
	.order {
		background-color: #fff;
		margin: 30rpx;
		padding: 30rpx;
		background-image: url('../../static/NoPath.png');
		background-size: 100% 100%;
	}

	.over {
		width: 220.08rpx;
		height: 220.08rpx;
		position: absolute;
		right: 60rpx;
		z-index: 0;
	}

	.tit {
		font-size: 36rpx;
		font-weight: 500;
		color: #1E1E1E;
		font-family: Noto Sans SC-Medium, Noto Sans SC;
	}

	.titl {
		font-size: 26rpx;
		font-family: Noto Sans SC-Medium, Noto Sans SC;
		font-weight: 500;
		color: #1E1E1E;
	}
</style>
